<template>
  <div class="app-container">
    <el-upload
      action="#"
      class="upload-demo"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :file-list="fileList"
      :http-request="uploadFile"
      multiple
      :limit="100"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">可以上传jpg/png/gif文件，且不超过5MB</div>
    </el-upload>

    <!-- <el-pagination
      background
      :page-size="25"
      :pager-count="10"
      layout="prev, pager, next"
      :total="count"
      @current-change="handleCurrentPageChange"
    /> -->

    <el-table :data="list" style="width: 100%">
      <el-table-column label="预览" width="120">
        <template slot-scope="scope">
          <img class="preview-img" :src="scope.row.url+'?x-oss-process=image/resize,l_120'" :alt="scope.row.name">
        </template>
      </el-table-column>

      <el-table-column label="ID" min-width="120" prop="state">
        <template slot-scope="scope">
          <span style="margin-left: 8px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="前端链接" min-width="180">
        <template slot-scope="scope">
          <span style="margin-left: 8px">{{ scope.row.url }}</span>
        </template>
      </el-table-column>

      <el-table-column label="oss链接" min-width="180">
        <template slot-scope="scope">
          <span style="margin-left: 8px">{{ scope.row.ossUrl }}</span>
        </template>
      </el-table-column>

      <el-table-column label="文件大小" width="100" prop="state">
        <template slot-scope="scope">
          <span style="margin-left: 8px">{{ convertFileSize(scope.row.size) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建日期" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.createdDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import { getList, deleteItem, uploadItem } from '@/api/sutanpu'
import * as Api from '@/api/sutanpu'
import * as Tool from '@/utils/tool'

export default {
  // filters: {
  //   statusFilter(status) {
  //     const statusMap = {
  //       published: 'success',
  //       draft: 'gray',
  //       deleted: 'danger'
  //     }
  //     return statusMap[status]
  //   }
  // },
  data() {
    return {
      list: null,
      count: null,
      convertFileSize: Tool.convertFileSize,
      fileList: [],
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      Api.getList().then(response => {
        // console.log(response.data.rows)
        this.list = response.data.rows
        this.list.forEach(item => {
          item.createdDate = Tool.convertUtc(item.createdAt)
        })

        this.count = response.data.count
        this.listLoading = false
      })
    },
    handleUploadSuccess() {
      this.fetchData()
    },
    handleDelete(index, row) {
      const _this = this
      console.log('delete: ' + row.id)
      Api.deleteItem(row.id).then(response => {
        _this.fetchData()
      })
    },
    uploadFile(param) {
      param.onSuccess = this.handleUploadSuccess
      const form = new FormData()
      form.append('file', param.file)
      Api.uploadItem(form).then(() => {
        // this.handleUploadSuccess()
        // console.log(param, this.fileList)
        // for (let index = 0; index < this.fileList.length; index++) {
        //   if (this.fileList[index].name === param.file.name) {
        //     this.fileList.splice(index, 1)
        //   }
        // }
        this.fetchData()
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    }

  }
}
</script>

<style lang="less" scoped>
.preview-img{
    max-width: 120px;
    max-height: 120px;
}
</style>
